<template>
  <div class="sim-toolbar">
    <div
      v-for="btn in visibleHeaderBtns"
      :key="btn.value"
      :style="{background: `url(${btn.icon}) no-repeat center/contain`}"
      class="_header-btn"
      :class="{ '_disabled-auto': btn.isDisabled }"
      @click="controller.toolbarService.handleHeaderBtnClick(btn)">
      <div class="__tips g-flex-center g-pd-tb-4 g-pd-lr-8 g-absolute">{{$t(btn.tooltip)}}</div>
    </div>
    <div
      :style="{background: `url(${diagramAutoChangeData.icon}) no-repeat center/contain`}"
      class="_header-btn"
      :class="{ '_disabled-auto': !controller.toolbarService.isDiagramAutoSwitch }"
      style="margin-left:12px;"
      @click="setAutoChange">
      <div class="__tips g-flex-center g-pd-tb-4 g-pd-lr-8 g-absolute">{{$t(diagramAutoChangeData.tooltip)}}</div>
    </div>
    <div style="margin: 0 12px; display: inline-block">
      <span style="color: #808080">{{$t('trigger')}}</span>
      <el-select
        v-model="controller.toolbarService.signalValue"
        size="small"
        style="width: 100px; margin-left: 10px"
        placeholder=" "
        :disabled="controller.toolbarService.signalList.length === 0"
        class="signal_select"
        @change="signalEmit">
        <el-option v-for="item in controller.toolbarService.signalList" :key="item.id" :value="item.id" :label="item.name" />
      </el-select>
    </div>

    <span class="g-m-l-6" @click="speedtest">{{$t('speed')}}</span>
    <el-slider
      v-model="controller.toolbarService.speed"
      :show-tooltip="false"
      :min="controller.toolbarService.simSpeedMin"
      :max="controller.toolbarService.simSpeedMax"
      class="g-inline-block"
      style="width: 100px; vertical-align: middle; margin-left: 16px"
      @change="handleSpeedChange" />
  </div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import { controller } from "@/engine/Controller";
import { diagramAutoChangeBtn } from "@/engine/_";
import { RouterName } from "../router";
import { SubWinName } from "@/engine/types/Win";

const diagramAutoChangeData = diagramAutoChangeBtn;

const signalEmit = (signalId: string) => {
  controller.toolbarService.signalEmit(signalId);
};

const handleSpeedChange = (s: number) => {
  controller.toolbarService.handleSpeedChange(s);
};

const visibleHeaderBtns = computed(() => controller.toolbarService.getVisibleButtons());

const setAutoChange = () => {
  controller.toolbarService.isDiagramAutoSwitch = !controller.toolbarService.isDiagramAutoSwitch;
};

const speedtest = () => {
  console.log('sss');
  controller.winService.openPluginSubWin(
    RouterName.Charts,
    { width: 720, height: 400, skipTaskbar: false, title: SubWinName.Charts }
  );
};

</script>
<style lang="scss">
.sim-toolbar {
  height: 50px;
  box-sizing: border-box;
  padding: 9px 8px;
  margin-bottom: 8px;
  background-color: #E6F0FF;
  .el-slider {
    .el-slider__runway {
      background-color: #aec4cf;
      height: 1px;
      .el-slider__bar {
        height: 1px;
        background-color: #414f58;
      }
      .el-slider__button-wrapper {
        top: -17px;
        .el-slider__button {
          width: 15px;
          height: 15px;
          border: 1px solid;
        }
      }
    }
  }
  ._header-btn {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 12px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    &:hover {
      background: linear-gradient(297deg, #c0dbea 0%, #def2fd 100%);
    }
    &:hover .__tips {
      display: block;
    }
    &:active {
      background: linear-gradient(107deg, #a3dbff 0%, #74c5f8 100%);
    }
    &._disabled {
      filter: grayscale(100%);
      cursor: not-allowed;
    }
    &._disabled-auto {
      filter: grayscale(100%);
    }
    & .__tips {
      width: fit-content;
      height: 16px;
      background: #fff;
      left: 12px;
      top: 24px;
      border: 1px solid #eee;
      border-radius: 2px;
      white-space: nowrap;
      display: none;
    }
  }
}
</style>
